---
type: tutorial
title: Créer un pied de page de médias sociaux
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Créez un nouveau composant à partir de zéro, puis ajoutez-le à vos pages
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Créez un composant Footer
  - Créez et passez des props à un composant Social Media
</PreCheck>

Maintenant que vous avez utilisé des composants Astro sur une page, utilisons un composant à l'intérieur d'un autre composant !

## Créez un composant Footer

<Steps>
1. Créez un nouveau fichier à l'emplacement `src/components/Footer.astro`.

2. Copiez le code suivant dans votre nouveau fichier, `Footer.astro`.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>Apprenez-en plus sur mes projets sur <a href={`https://www.${platform}.com/${username}`}>{platform}</a> !</p>
    </footer>
    ```
</Steps>

### Importez et utilisez `Footer.astro`

<Steps>
1. Ajoutez la déclaration d'importation suivante dans le frontmatter de chacune de vos trois pages Astro (`index.astro`, `about.astro` et `blog.astro`):

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. Ajoutez un nouveau composant `<Footer />` dans votre modèle Astro sur chaque page, juste avant la balise de fermeture `</body>` pour afficher votre pied de page en bas de la page.

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. Dans votre aperçu de navigateur, vérifiez que vous pouvez voir votre nouveau texte de pied de page sur chaque page.
</Steps>

<Box icon="puzzle-piece">

## Essayez par vous-même - Personnalisez votre pied de page

Personnalisez votre pied de page pour afficher plusieurs réseaux sociaux (par exemple, Instagram, Twitter, LinkedIn) et incluez votre nom d'utilisateur pour créer un lien direct vers votre propre profil.

</Box>

### Point de contrôle du code
Si vous avez suivi chaque étape du tutoriel, votre fichier `index.astro` devrait ressembler à ceci :

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Page d'accueil';
---

<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## Créez un composant Social Media

Étant donné que vous pouvez avoir plusieurs comptes en ligne auxquels vous pouvez créer un lien, vous pouvez créer un seul composant réutilisable et l'afficher plusieurs fois. À chaque fois, vous lui passerez différentes propriétés (`props`) à utiliser : la plateforme en ligne et votre nom d'utilisateur là-bas.

<Steps>
1. Créez un nouveau fichier à l'emplacement `src/components/Social.astro`.

2. Copiez le code suivant dans votre nouveau fichier, `Social.astro`.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### Importez et utilisez `Social.astro` dans votre Footer

<Steps>
1. Modifiez le code dans `src/components/Footer.astro` pour importer, puis utilisez ce nouveau composant trois fois, en passant à chaque fois des **attributs de composant** différents en tant que props :

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>Apprenez-en plus sur mes projets sur <a href={`https://www.${platform}.com/${username}`}>{platform}</a> !</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. Vérifiez à nouveau votre aperçu de navigateur, et vous devriez voir votre nouveau pied de page affichant des liens vers ces trois plateformes sur chaque page.
</Steps>

## Stylisez votre composant Social Media

<Steps>
1. Personnalisez l'apparence de vos liens en ajoutant une balise `<style>` à `src/components/Social.astro`.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---

    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. Ajoutez une balise `<style>` à `src/components/Footer.astro` pour améliorer la mise en page de son contenu.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---

    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```
</Steps>

3. Vérifiez à nouveau votre aperçu de navigateur, et confirmez que chaque page affiche un pied de page mis à jour.

<Box icon="question-mark">

### Testez-vous

1. Que devez-vous écrire dans le frontmatter d'un composant Astro pour recevoir les valeurs de `title`, `author` et `date` en tant que props ?

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="Mon premier article" author="Dan" date="12 août 2022" />`
      </Option>
    </MultipleChoice>
    

2. Comment **passez-vous des valeurs en tant que props** à un composant Astro ?
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="Mon premier article" author="Dan" date="12 août 2022" />`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux créer de nouveaux composants `.astro` dans `src/components/`
- [ ] Je peux importer et utiliser des composants Astro à l'intérieur d'autres composants Astro.
- [ ] Je peux passer des props à un composant Astro.
</Checklist>
</Box>

### Ressources

- [Props de composants dans Astro](/fr/basics/astro-components/#props-de-composant)
